<template>
	<view>
		<u-navbar title="我的" back-icon-color="#ffffff" title-color="#fff" title-size="32" :background="{ background: '#333' }" :border-bottom="false"></u-navbar>
		<view class="mine-content u-skeleton">
			<view class="bg"></view>
			<view class="user-info u-flex u-col-center">
				<image class="avatar-icon u-skeleton-circle" :src="vuex_user.avatar" mode=""></image>
				<view class="">
					<view class="u-flex u-col-center u-skeleton-rect">
						<view class="user-name">昵称：{{vuex_user.name}}</view>
						<view class="vip-le"><image class="" src="../../static/images/icon_asso1@2x.png" mode="widthFix"></image></view>
					</view>
					<view class="u-skeleton-rect">账号：{{vuex_user.mobile}}</view>
				</view>
			</view>
			<view class="assets u-flex u-skeleton-fillet">
				<view class="assets-item u-flex u-flex-col u-col-center u-row-center">
					<navigator url="../../friend/giveaway/giveaway" hover-class="none" class="u-flex u-flex-col u-col-center u-row-center">
						<view class="">{{vuex_user.bean}}</view>
						<view class="label">欢嘻豆</view>
					</navigator>
				</view>
				<view class="assets-item u-flex u-flex-col u-col-center u-row-center">
					<view class="">{{vuex_user.integral}}</view>
					<view class="label">积分</view>
				</view>
				<view class="assets-item u-flex u-flex-col u-col-center u-row-center">
					<view class="">{{vuex_user.yuanbao}}</view>
					<view class="label">元宝</view>
				</view>
				<view class="assets-item u-flex u-flex-col u-col-center u-row-center">
					<view class="">{{vuex_user.balance}}</view>
					<view class="label">余额</view>
				</view>
			</view>
			<view class="menu u-flex u-flex-wrap u-row-around">
				<view class="menu-item ">
					<navigator url="../order/order" hover-class="none">
						<image src="../../static/images/icon-dingdan@2x.png" mode="widthFix"></image>
					</navigator>
				</view>
				<view class="menu-item ">
					<navigator url="../convert/convert" hover-class="none">
						<image src="../../static/images/icon-friend2@2x.png" mode="widthFix"></image>
					</navigator>
				</view>
				<view class="menu-item ">
					<navigator url="../bill/bill" hover-class="none">
						<image src="../../static/images/icon-oder@2x.png" mode="widthFix"></image>
					</navigator>
				</view>
				<view class="menu-item ">
					<navigator url="../address/address" hover-class="none">
						<image src="../../static/images/icon_address@2x.png" mode="widthFix"></image>
					</navigator>
				</view>
				<view class="menu-item ">
					<image src="../../static/images/icon_contact@2x.png" mode="widthFix"></image>
				</view>
				<view class="menu-item ">
					<image src="../../static/images/icon-our@2x.png" mode="widthFix"></image>
				</view>
				<view class="menu-item ">
					<navigator url="../pages/index/index" hover-class="none" open-type="navigateBack">
						<image src="../../static/images/icon_backfarm2@2x.png" mode="widthFix"></image>
					</navigator>
				</view>
			</view>
		</view>
		<!--引用骨架屏组件-->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading:true,
			
		};
	},
	onLoad() {
		if(!this.vuex_token){
			this.$u.toast("请先登录")
			setTimeout(()=>{
				uni.navigateTo({
					url:'../../pages/login/login'
				})
			},1000)
		}else{
			setTimeout(()=>{
				this.loading = !this.loading
			},1000)
		}
	},
	onShow() {
		if(this.vuex_token){
			this.$getMemberInfo(this.vuex_user.uuid).then(res => {
				console.log(res)
				if (res.errno === "000") {
					this.$u.vuex("vuex_user",res.result.data)
				}
			}).catch(err => {
				console.log(err)
			})
		}
	},
	methods: {}
};
</script>

<style>
.mine-content {
	width: 100%;
	height: 100vh;
	position: absolute;
	top: 0;
	background: #ddd;
	padding-top: 44px;
	box-sizing: border-box;
}
.bg {
	position: absolute;
	top: 44px;
	left: 0;
	width: 100%;
	height: 410rpx;
	background: #333333;
	border-bottom-right-radius: 100rpx;
	border-bottom-left-radius: 100rpx;
}
.user-info {
	color: #ffffff;
	font-size: 32rpx;
	padding: 94rpx 66rpx 80rpx;
	box-sizing: border-box;
	position: relative;
	z-index: 2;
}
.user-name {
	max-width: 300rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.avatar-icon {
	width: 110rpx;
	height: 110rpx;
	border-radius: 50%;
	margin-right: 52rpx;
	overflow: hidden;
}
.vip-le {
	width: 150rpx;
	height: 66rpx;
}
.vip-le image {
	width: 100%;
	height: 100%;
}
.assets{
	background-color: #FFFFFF;
	border-radius:10rpx;
	width:700rpx;
	height:200rpx;
	position: relative;
	z-index: 2;
	margin: 0 auto;
}
.assets-item{
	width: calc(100%/4);
	height: 100%;
	text-align: center;
	font-size: 36rpx;
}
.label{
	font-size: 32rpx;
	color: #999999;
	margin-top: 20rpx;
}
.menu{
	margin-top: 52rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
}
.menu-item{
	width: 220rpx;
	height: 220rpx;
}
.menu-item image{
	width: 100%;
	height: 100%;
}
</style>
